import React, {Component} from 'react';
import classname from 'classnames'
import PersonalInfoItem from 'components/widgets/PersonalInfo/PersonalInfoItem';
import './index.less';
import ReAvatar from 'components/widgets/ReAvatar';
import ReIcon from 'components/widgets/ReIcon';

export default class PersonalInfo extends Component {

    constructor(props) {
        super(props)
    }

    renderAvatar = () => {
        return (
            <div className="personal-info-avatar-wrapper">
                {/*<img src={this.props.avatarUrl} className="avatar-image" alt=""/>*/}
                <ReAvatar src={this.props.avatarUrl} className="avatar-image"
                          size={300}/>
                <p className="change-avatar-btn">
                    更换头像
                    <input className="upload-input"
                           type='file' ref="fileInput"
                           onChange={(e) => this.props.avatarChange && this.props.avatarChange(e, this.refs.fileInput)}
                           accept="image/jpg,image/png,image/jpeg"/>
                </p>
            </div>
        )
    }

    renderInfoList = () => {
        let settingList = [
            // {name: $$.LN.MY_3D_EXHIBITION, href: $$.url('exhibition'), icon: 'tab_art_exhibition'},
            // {name: $$.LN.MY_ARTWORKS, href: $$.url('artwork'), icon: 'tab_works'},
            // {name: $$.LN.VERSION_MANAGE, href: $$.url('versionManage'), icon: 'banquan'},
            // {name: $$.LN.DATA_STATISTICS, href: $$.url('statistics'), icon: 'tab_statistics', cutLine: true},
            {name: $$.LN.PERSONAL_PUBLIC, href: $$.url('user'), icon: 'gerengongkaiye'},
            {name: $$.LN.PERSONAL_INFO, href: $$.url('setting'), icon: 'gerenziliao'},
            {
                name: $$.LN.MY_ACCOUNT,
                href: $$.url('account'),
                icon: 'tab_personal_center'
            },
            // {name: $$.LN.EXIT_LOGIN, icon: 'tuichu', lastItem: false}
        ];

        let myOwnList = [
            {name: $$.LN.MY_ARTWORKS, href: $$.url('artwork'), icon: 'tab_works'},
            {name: $$.LN.VERSION_MANAGE, href: $$.url('versionManage'), icon: 'banquan'},
            {name: $$.LN.MY_3D_EXHIBITION, href: $$.url('exhibitionManage'), icon: 'tab_art_exhibition'},
            {name: $$.LN.DATA_STATISTICS, href: $$.url('statistics'), icon: 'tab_statistics', cutLine: true}
        ];

        let accountList = [
            {name: $$.LN.MY_ARTWORKS, href: $$.url('artwork'), icon: 'tab_works'},
            {name: $$.LN.VERSION_MANAGE, href: $$.url('versionManage'), icon: 'banquan'},
            {name: $$.LN.ARTIST, href: $$.url('artist'), icon: 'banquan'},
            {name: $$.LN.MY_3D_EXHIBITION, href: $$.url('exhibitionManage'), icon: 'tab_art_exhibition'},
            {name: $$.LN.DATA_STATISTICS, href: $$.url('statistics'), icon: 'tab_statistics', cutLine: true}
        ];

        return <div className="personal-info-list-wrapper">
            <div className="list-flex-top">
                <div className="current-account">
                    <span>个人项目</span>
                </div>
                <div className="account-list">
                    {
                        myOwnList.map((item, index) => {
                            let itemTitleClassname = classname({
                                'item-title': true,
                                'active': item.href === this.props.isChecked
                            })
                            return (
                                <div className="personal-info-item-wrapper" key={index} onClick={() => {
                                    this.props.jumpMethod(item.href, true)
                                }}>
                            <span
                                className={item.href === this.props.isChecked ? 'item-active-line active' : 'item-active-line'}/>
                                    <div className={itemTitleClassname}>
                                        <ReIcon className='icon' icon={item.icon}/>
                                        <span className="text">{item.name}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
                <div className="cut-line"/>
                <div className="normal-list">
                    {
                        settingList.map((item, index) => {
                            let itemTitleClassname = classname({
                                'item-title': true,
                                'active': item.href === this.props.isChecked
                            })
                            return (
                                <div className="personal-info-item-wrapper" key={index} onClick={() => {
                                    this.props.jumpMethod(item.href, true)
                                }}>
                            <span
                                className={item.href === this.props.isChecked ? 'item-active-line active' : 'item-active-line'}/>
                                    <div className={itemTitleClassname}>
                                        <ReIcon className='icon' icon={item.icon}/>
                                        <span className="text">{item.name}</span>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>

            </div>
            <div className="list-flex-bottom">
                <div className="personal-info-item-wrapper exit" onClick={() => this.props.exit()}>
                    <span className={'item-active-line'}/>
                    <div className="item-title exit">
                        <ReIcon className='icon' icon={'tuichu'}/>
                        <span className="text">{$$.LN.EXIT_LOGIN}</span>
                    </div>
                </div>
            </div>
        </div>
    }

    render() {
        let personalClassname = classname({
            'personal-info-wrapper': true,
        }, this.props.className);
        return <div className={personalClassname}>
            {
                this.renderAvatar()
            }
            {
                this.renderInfoList()
            }
        </div>
    }

}